<template>
  <el-row style="background:white;border-radius:10px;min-height:180px;height:100%;padding:0px; margin-left: 10px;margin-right: 10px">
    <div>
      <div class="projectIndexTitle">
        <div class="projectIndexSquare"></div>
        <label class="projectIndexInfo">项目级别</label>
      </div>
      <!-- <el-row type="flex" align="middle" class="top10Title">
        <el-col :span="2">
          <div style="background-color:green;height:2vh;width:10px;border-radius:5px;"></div>
        </el-col>
        <el-col :span="20">项目级别分布</el-col>
        <el-col :span="2"> -->
      <!-- <component-Setting :id="recordId" :position="'5'"></component-Setting> -->
      <!-- </el-col>
      </el-row> -->
      <el-row>
        <!-- <div id="projectStatusMain" :style="{height:clientHeight*0.8*0.4*0.7+'px'}"></div> -->
        <div id="projectStatusMainDashboard" :style="{ 'min-height': '132px', height: 18 + 'vh' }"></div>
      </el-row>
    </div>
  </el-row>
</template>

<script>
import echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme
import { getAction } from '@tapui/utils/http'
import componentSetting from './componentSetting'
// 项目状态
export default {
  name: 'projectStatus',
  components: { componentSetting },
  // mixins: [mixin_list],
  data() {
    return {
      statusSeriesData: [],
      selections: [
        {
          value: '2020',
          label: '2020'
        },
        {
          value: '2019',
          label: '2019'
        },
        {
          value: '2018',
          label: '2018'
        }
      ],
      clientHeight: Number,
      selectType: ''
    }
  },
  props: {
    recordId: Number
  },
  beforeMount() {
    this.clientHeight = document.body.clientHeight
  },
  mounted() {
    this.setLineOptionForStatus()
  },
  methods: {
    setLineOptionForStatus(paramData) {
      getAction('/mpm/mpmIndex/getDataBoardProjectLevelEhartInfo', paramData).then((res) => {
        if (res.statusCode === 200) {
          // 渲染项目类型饼图
          // let mychart = echarts.init(this.$el, 'macarons')
          let mychart = echarts.init(document.getElementById('projectStatusMainDashboard'))
          var seriesForThis = res.result
          let option = {
            // color: ['#0066FF', '#00FF66', '#66CCFF'],
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: [
              {
                orient: 'vertical',
                itemGap: 10,
                top: 'center',
                left: '70%',
                height: 100,
                width: '100%',
                itemWidth: 15,
                textStyle: { fontSize: 10 },
                formatter: function formatter(name) {
                  var index = 0
                  var dataTemp = seriesForThis
                  dataTemp.forEach(function formatter(value, i) {
                    if (value.name === name) {
                      index = i
                    }
                  })
                  return name + '：' + dataTemp[index].value + '个'
                },
                data: seriesForThis
              }
            ],
            series: [
              {
                name: '项目状态',
                type: 'pie',
                // 大小
                // radius: ['55%', '75%'],
                // 位置
                center: ['35%', '50%'],
                avoidLabelOverlap: false,
                top: 0,
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: seriesForThis
              }
            ]
          }
          mychart.setOption(option)
        }
      })
    }
  },
  created() {}
}
</script>

<style scoped>
.parentCenter {
  display: flex;

  background: #cecece;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.child {
  background: #000;
  width: 10%;
  height: 10%;
}
.projectIndexTitle {
  padding-bottom: 0 !important;
}
</style>
